<template>
  <div class="vscode-root">
    <div class="toolbar">
      <button @click="runBuild">编译（npm run build）</button>
    </div>
    <div ref="editorContainer" class="editor"></div>
    <div class="output">
      <div class="output-title">编译输出：</div>
      <pre>{{ buildOutput }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
let editor = null
const editorContainer = ref(null)
const buildOutput = ref('')

onMounted(async () => {
  const monaco = await import('monaco-editor')
  editor = monaco.editor.create(editorContainer.value, {
    value: `// 这里可以编辑前端代码\nconsole.log('Hello Monaco!')`,
    language: 'javascript',
    theme: 'vs-dark',
    automaticLayout: true
  })
})

async function runBuild() {
  buildOutput.value = '正在编译...\n'
  if (window.electronAPI && window.electronAPI.runCmd) {
    // 只允许安全命令，主进程需支持 npm run build
    const result = await window.electronAPI.runCmd('npm run build')
    buildOutput.value += result
  } else {
    buildOutput.value += '（仿真模式）'
  }
}
</script>

<style scoped>
.vscode-root { min-width: 800px; min-height: 600px; background: #1e1e1e; color: #fff; border-radius: 10px; box-shadow: 0 4px 24px #0008; display: flex; flex-direction: column; }
.toolbar { padding: 8px 16px; background: #222; border-radius: 10px 10px 0 0; }
button { background: #0078d7; color: #fff; border: none; border-radius: 4px; padding: 6px 18px; cursor: pointer; margin-right: 12px; }
button:hover { background: #005fa3; }
.editor { flex: 1; min-height: 350px; }
.output { background: #111; color: #0f0; padding: 12px; border-radius: 0 0 10px 10px; min-height: 120px; font-family: 'Consolas', 'Courier New', monospace; }
.output-title { color: #fff; margin-bottom: 4px; }
pre { margin: 0; white-space: pre-wrap; word-break: break-all; }
</style>